<!--
committee: "申铁信息团委"
createTime: "2021-06-16T08:59:26.128919"
genderLabel: ""
id: 2
is_delete: false
sort: null
status: 1
unit: "申铁信息1"
updateTime: "2021-06-16T08:59:26.128925"
-->
<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <div>
          <el-form :model="searchParams" ref="searchParams" :inline="true">
            <el-form-item label="单位/站段" prop="unit">
              <el-input class="input" v-model="searchParams.unit" maxlength='100' placeholder="请输入单位/站段" clearable show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="团委名称" prop="committee">
              <el-input class="input" v-model="searchParams.committee" maxlength='100' placeholder="请输入团委名称" clearable show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="searchParams.status" placeholder="请选择" clearable>
                <el-option v-for="item in statusOptions" :key="item.key" :label="item.name" :value="item.key"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
              <el-button @click="resetQuery" type="primary" icon="el-icon-search" style="margin-left:40px">重置</el-button>
              <el-button @click="handleCreate" type="primary" icon="el-icon-plus" style="margin-left:40px">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="deptList" size='medium' border>
            <el-table-column prop="id" label="id" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column prop="unit" label="单位/站段" show-overflow-tooltip></el-table-column>
            <el-table-column prop="committee" label="团委名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sort" label="顺序" show-overflow-tooltip></el-table-column>
            <el-table-column prop="statusLabel" label="状态" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTimeFormat" label="创建时间" width="200"></el-table-column>
            <el-table-column prop="redact" label="操作" fixed="right" width="120">>
              <template slot-scope="scope">
                <el-button type="text" @click="handleDelete(scope.$index, scope.row)" size='medium'>删除</el-button>
                <el-button type="text" @click="handleUpdate(scope.$index, scope.row)" size='medium'>修改</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>
    </el-row>

    <el-col style="margin-top: 20px;">
      <el-pagination
          
          background
          @current-change="findDeptList"
          :current-page.sync="page"
          :page-size='size'
          layout="prev, pager, next"
          :total="totalSize">
        </el-pagination>
    </el-col>

  </div>
</template>

<script>
import {
  findDeptList, deleteDept
} from '@/api/system/dept.js'
export default {
  components: {},
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      deptList: null,
      searchParams: {
        unit: '',
        committee: '',
        status: ''
      },
      statusOptions: [
        {key: 0, name: "停用"},
        {key: 1, name: "正常"},
      ]
    }
  },

  created(){
    this.findDeptList()
  },
  methods:{
    // 增
    handleCreate(){
      this.$refs.updateDept.show()
    },
    // 删
    handleDelete(index, row){
      this.$confirm('是否确认删除单位/站段"' + row.unit + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function(){
        return deleteDept({deptId: row.id})
      }).then(() => {
        this.findDeptList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(function() {});
    },
    // 改
    handleUpdate(index, row){
      this.$refs.updateDept.show(row.id)
    },
    /** 搜索按钮操作 */
    handleSearch(){
      this.page = 1
      this.findDeptList()
    },
    resetQuery() {
      this.resetForm('searchParams')
      this.handleSearch()
    },

    /** 查询用户列表 */
    findDeptList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findDeptList(this.searchParams).then(res => {
        if(res.data.code == 10000){
          this.totalSize = res.data.data.total_count
          this.deptList = res.data.data.list
          this.deptList.forEach(elem=>{
              elem.createTimeFormat =  elem.createTime.slice(0, 19).replace('T', ' ')
              elem.statusLabel = elem.status == 1 ? "正常": "停用"
          })
        }
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.searchForm{
  display: flex;
  flex-direction: row;
}
.searchForm .el-form-item{
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-top: 10px;
}
</style>
